.main {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #82cead;

    .sakura {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .circle_wrap {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .circle_main {
            position: relative;
            width: 600px;
            height: 600px;
            /* border: 5px solid #fff; */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            .my_page {
                position: relative;
                width: 190px;
                height: 190px;
                border-radius: 50%;
                background-color: #afa2ec;
                box-sizing: border-box;
                padding-top: 20px;
                cursor: pointer;

                .my_head {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 124px;
                    height: 124px;
                    border-radius: 50%;
                    margin: auto;

                    img {
                        width: 120px;
                        height: 120px;
                        border-radius: 50%;
                    }
                }

                .p1 {
                    text-align: center;
                    color: #fff;
                    margin-top: 5px;
                }
            }

            .todo,
            .games,
            .message_board,
            .web_chat,
            .buy_page {
                position: absolute;
                width: 150px;
                height: 150px;
                border-radius: 50%;
                text-align: center;
                line-height: 150px;
                color: #fff;
                font-size: 20px;
                cursor: pointer;

                &:hover {
                    animation-play-state: paused;
                    z-index: 9;
                    filter: blur(1px);
                }
            }

            @keyframes circlex-todo {
                0% {
                }
                100% {
                    left: 525px;
                }
            }
            @keyframes circley-todo {
                0% {
                }
                100% {
                    top: 525px;
                }
            }
            .todo {
                top: -75px;
                left: -75px;
                background-color: #e63f00;
                box-shadow: 0 0 2px 2px rgba(153 0 255 / 0.8);
                animation: circlex-todo 8s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite
                        alternate,
                    circley-todo 8s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite
                        alternate;
            }

            @keyframes circlex-games {
                0% {
                }
                100% {
                    left: 525px;
                }
            }
            @keyframes circley-games {
                0% {
                }
                100% {
                    top: -75px;
                }
            }
            .games {
                top: 525px;
                left: -75px;
                background-color: #ffaa33;
                box-shadow: 0 0 2px 2px rgb(0 102 255 / 0.8);
                animation: circlex-games 9s cubic-bezier(0.36, 0, 0.64, 1) 0s
                        infinite alternate,
                    circley-games 9s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite
                        alternate;
            }

            @keyframes circlex-message_board {
                0% {
                }
                100% {
                    left: -75px;
                }
            }
            @keyframes circley-message_board {
                0% {
                }
                100% {
                    top: -75px;
                }
            }
            .message_board {
                top: 525px;
                left: 525px;
                background-color: #77ff00;
                box-shadow: 0 0 2px 2px rgb(255 221 170 / 0.8);
                animation: circlex-message_board 10s
                        cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
                    circley-message_board 10s cubic-bezier(0.36, 0, 0.64, 1) 0s
                        infinite alternate;
            }

            @keyframes circlex-web_chat {
                0% {
                }
                100% {
                    left: -75px;
                }
            }
            @keyframes circley-web_chat {
                0% {
                }
                100% {
                    top: 525px;
                }
            }
            .web_chat {
                top: -75px;
                left: 525px;
                background-color: #0066ff;
                box-shadow: 0 0 2px 2px rgb(255 170 51 / 0.8);
                animation: circlex-web_chat 11s cubic-bezier(0.36, 0, 0.64, 1)
                        0s infinite alternate,
                    circley-web_chat 11s cubic-bezier(0.36, 0, 0.64, 1) -5.5s infinite
                        alternate;
            }

            .buy_page {
                top: -75px;
                left: -75px;
                background-color: #9900ff;
                box-shadow: 0 0 2px 2px rgba(230 63 0 / 0.8);
                animation: circlex-todo 6s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite
                        alternate,
                    circley-todo 6s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite
                        alternate;
            }
        }
    }

    .quit {
        position: fixed;
        z-index: 2;
        top: 50px;
        right: 50px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #e63f00;
        cursor: pointer;
    }

    .user_nums {
        position: fixed;
        z-index: 2;
        top: 45px;
        right: 100px;
        width: 460px;
        height: 38px;
        user-select: none;
        -webkit-user-select: none;
        text-align: center;
        line-height: 38px;
        font-size: 24px;
        color: #df5f9f;

        span {
            font-size: 22px;
            color: #796cb5;
        }

        .mua_gif {
            position: absolute;
            z-index: 1;
            bottom: 6px;
            right: -20px;
            width: 50px;
            height: 55px;
            border-radius: 4px;
            overflow: hidden;
            background: url("@images/mua.gif") no-repeat center center;
            background-size: 100% 100%;
        }
    }
}
